<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.id">
      <dt>{{ item.name }}</dt>
      <dd>
        <div v-for="v in item.values" :key="v.name">
          <img
            :class="{ selected: v.selected,disabled:v.disabled }"
            @click="clickSpecs(item, v)"
            v-if="v.picture"
            :src="v.picture"
            :title="v.name"
          />
          <span
            :class="{ selected: v.selected,disabled:v.disabled }"
            @click="clickSpecs(item, v)"
            v-else
            >{{ v.name }}</span
          >
        </div>
      </dd>
    </dl>
    <button @click="handleClick">点我</button>
  </div>
</template>

<script>
import getPowerSet from '@/vender/power-set'
const spliter = '⭐'
export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      pathMap: {}
    }
  },
  mounted () {
    // this.updateDisabledStatus(this.goods.specs)
  },
  methods: {
    // 获取字典
    getPathMap  (skus) {
      // 1.定义一个字典对象
      // const pathMap = {}

      skus.forEach(sku => {
        if (sku.inventory) { // 有库存的
          // 2. 获取产品单元属性的组合数组
          const skuValueNameList = sku.specs.map(v => v.valueName)
          //   console.log('skuValueNameList', skuValueNameList)
          // 3. 根据每一个产品属性的数组，获取到所有可能的属性组合
          const pathArr = getPowerSet(skuValueNameList)
          //   console.log('pathArr', pathArr)

          pathArr.forEach(v => {
            const key = v.join(spliter)
            // 4.把所有可能的属性组合拼成对象，放入到字典pathMap
            if (!this.pathMap[key]) {
              // 4.1 字典里面没有这个key，给这个key添加对应的skuid 作为它的value
              this.pathMap[key] = [sku.id]
            } else {
              // 4.2 字典里已经有这个key，给这个key追加对应的skuid
              this.pathMap[key].push(sku.id)
            }
          })
        }
      })
      console.log('pathMap', this.pathMap)
    },
    // 获取当前被选中的规格按钮
    getSelected (specs) {
      const selectedArr = []
      specs.forEach((spec, index) => { // 遍历规格
        spec.values.forEach(v => { // 遍历每种规格的规格按钮
          selectedArr[index] = v.selected ? v.name : undefined
        })
      })
      //   console.log('selectedArr', selectedArr)
      return selectedArr
    },
    // 更新规格按钮的禁用状态
    updateDisabledStatus (specs) {
      this.getPathMap(this.goods.skus)

      specs.forEach((spec, index) => {
        // 获取所有的选中规格集合
        const selectedArr = this.getSelected(specs)
        spec.values.forEach(item => {
          // 已经选中的按钮不用判断
          if (item.name === selectedArr[index]) return false

          // 未选中的替换对应的值：模拟用户可能选择的规格按钮
          selectedArr[index] = item.name
          //   console.log('selectedArr', selectedArr)

          const key = selectedArr.filter(v => v).join(spliter)
          // 查找字典中这个key是否存在，不存在就处理成禁用状态
          item.disabled = !this.pathMap[key]
        })
      })
    },
    // 点击规格按钮
    clickSpecs (specs, spec) {
      // specs 某一种规格，例如：颜色
      // spec 具体某一个规格按钮

      if (spec.selected) {
        // 之前选中的：取消选中
        spec.selected = false
      } else {
        // 之前没有选中的：选中该项，并取消其他项的选中状态
        specs.values.forEach(v => { v.selected = false })
        spec.selected = true

        this.$forceUpdate()
      }

      // 每次点击规格按钮，重新查一下每个规格按钮的禁用状态
      this.updateDisabledStatus(this.goods.specs)
    },
    handleClick () {
      this.getPathMap(this.goods.skus)
      this.getSelected(this.goods.specs)
      this.updateDisabledStatus(this.goods.specs)
    }
  }

}
</script>

<style scoped lang="less">
@xtxColor: #30b08f;
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      display: flex;
      flex-wrap: wrap;
       img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
       span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        margin-top: 10px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
